<template>
  <div>

    <Spin size="large" fix v-if="loading"></Spin>

    <div>
      <PageHeader class="product_tabs" hidden-breadcrumb>
        <div slot="title">
          <router-link :to="{path: '/admin/article/list'}"><Button icon="ios-arrow-back" size="small" class="mr20">文章列表</Button></router-link>
          <span v-text="$route.meta.title" class="mr20"></span>
        </div>
      </PageHeader>
    </div>

    <div class="ui-publish--wrap">
      <div class="pls">
        <div class="pls-container">
          <div class="pls-form">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
              <!-- ******************** 文章标题 ******************** -->
              <FormItem prop="title">
                <div class="pls-form-item pls-form-item-required">
                  <div class="pls-form-item-label">
                    <span>文章标题</span>
                  </div>
                  <div class="pls-form-item-control">
                    <Input v-model="formValidate.title" maxlength="100" show-word-limit placeholder="请在这里输入100字以内的标题" style="width: 720px" />
                  </div>
                </div>
              </FormItem>
              <!-- ******************** 文章标题 ******************** -->
              <!-- ******************** 文章摘要 ******************** -->
              <FormItem prop="summary">
                <div class="pls-form-item pls-form-item-required">
                  <div class="pls-form-item-label">
                    <span>文章摘要</span>
                  </div>
                  <div class="pls-form-item-control">
                    <Input v-model="formValidate.summary" type="textarea" :rows="5" maxlength="200" show-word-limit placeholder="请在这里输入200个字以内的引文" style="width: 720px" />
                  </div>
                </div>
              </FormItem>
              <!-- ******************** 文章摘要 ******************** -->
              <!-- ******************** 发布时间 ******************** -->
              <FormItem prop="publish_time">
                <div class="pls-form-item pls-form-item-required">
                  <div class="pls-form-item-label">
                    <span>发布时间</span>
                  </div>
                  <div class="pls-form-item-control">
                    <DatePicker v-model="dateVal" type="datetime" placement="bottom-end" placeholder="选择发布时间" format="yyyy年MM月dd日 HH点mm分" style="width:260px" @on-change="onChangeDate">
                    </DatePicker>
                  </div>
                </div>
              </FormItem>
              <!-- ******************** 发布时间 ******************** -->

              <!-- ******************** 发布形式 ******************** -->
              <!-- <FormItem>
                <div class="pls-form-item pls-form-item-required">
                  <div class="pls-form-item-label">
                    <span>发布形式</span>
                  </div>
                  <div class="pls-form-item-control">
                    <RadioGroup v-model="formValidate.status">
                      <Radio :label="1" border>私密</Radio>
                      <Radio :label="2" border>公开</Radio>
                    </RadioGroup>
                  </div>
                </div>
              </FormItem> -->
              <!-- ******************** 发布形式 ******************** -->
              <!-- ******************** 文章模版 ******************** -->
              <FormItem>
                <div class="pls-form-item pls-form-item-required">
                  <div class="pls-form-item-label">
                    <span>文章模版</span>
                  </div>
                  <div class="pls-form-item-control">
                    <RadioGroup v-model="formValidate.template_type">
                      <Radio v-for="(item, index) in templateType" :key="index" :label="item.key" border>{{ item.name }}</Radio>
                    </RadioGroup>
                  </div>
                </div>
              </FormItem>
              <!-- ******************** 文章模版 ******************** -->
              <!-- ******************** 网站专栏 ******************** -->
              <FormItem>
                <div class="pls-form-item pls-form-item-required">
                  <div class="pls-form-item-label">
                    <span>网站专栏</span>
                  </div>
                  <div class="pls-form-item-control">
                    <Tag type="dot" closable color="warning" style="margin:0 5px 20px 0;" v-for="(item, index) in formValidate.website_category" :key="index" @on-close="onDelCategoryTag(item, 'website_category')">{{ item }}</Tag>
                    <CheckboxGroup v-model="formValidate.website_category">
                      <Checkbox v-for="(item, index) in websiteCategory.list" :key="index" :label="item.name" border style="margin:0 5px 5px 0;"></Checkbox>
                    </CheckboxGroup>
                  </div>
                </div>
              </FormItem>
              <!-- ******************** 网站专栏 ******************** -->
              <!-- ******************** 分类专栏 ******************** -->
              <FormItem>
                <div class="pls-form-item pls-form-item-required">
                  <div class="pls-form-item-label">
                    <span>分类专栏</span>
                  </div>
                  <div class="pls-form-item-control">
                    <Tag type="dot" closable color="warning" style="margin:0 5px 20px 0;" v-for="(item, index) in formValidate.article_category" :key="index" @on-close="onDelCategoryTag(item, 'article_category')">{{ item }}</Tag>
                    <CheckboxGroup v-model="formValidate.article_category">
                      <Checkbox v-for="(item, index) in articleCategory.list" :key="index" :label="item.title" border style="margin:0 5px 5px 0;"></Checkbox>
                    </CheckboxGroup>
                  </div>
                </div>
              </FormItem>
              <!-- ******************** 分类专栏 ******************** -->

              <!-- ******************** 封面图 ******************** -->
              <div class="pls-form-item">
                <div class="pls-form-item-label">
                  <span>添加封面图</span>
                </div>
                <div class="pls-form-item-control" style="height:180px;">
                  <FormItem prop="cover">
                    <div class="pls-face-image-list" style="height:180px;">
                      <div class="pls-face-item" v-if="formValidate.cover" style="border:1px solid #6af;">
                        <img :src="formValidate.cover" />
                        <div class="pls-face-operation">
                          <div @click="onAddCover">
                            <Icon type="ios-cloud-upload-outline" />
                          </div>
                          <div @click="onRmCover">
                            <Icon type="ios-trash-outline" />
                          </div>
                        </div>
                      </div>
                      <div class="pls-add-image-new size-134" style="width:220px;height:150px;" v-else @click="onAddCover">
                        <Icon type="ios-add" size="56" color="#6af" />
                        <span>添加上传封面图</span>
                      </div>
                      <div class="pls-form-item-tips" style="margin-top:0px;">
                        请上传图片尺寸为 220x150 的清晰封面，
                      </div>
                      <div style="clear:both;"></div>
                    </div>
                  </FormItem>
                </div>
              </div>
              <!-- ******************** 封面图 ******************** -->
            </Form>
            <Divider />
            <Row>
              <Col span="10">
              <Button type="primary" size="large" long @click="onSubmit">保存</Button>
              </Col>
            </Row>
          </div>
        </div>
      </div>
    </div>

    <resource-add-image :show="resourceAddImageModal" @on-visible-change="onVisibleChange" @on-export="onExportImages" :needCrop="false"></resource-add-image>

  </div>
</template>

<script>
import { store, edit, update } from '@/api/content/content'
import { getSortCategory, getWebsiteCategory } from '@/api/content/sortCategory'

import ResourceAddImage from '@/components/ui/UiAddImage.vue'

export default {
  name: 'content_article_ArticleCoverEdit',
  components: {
    ResourceAddImage,
  },
  data () {
    return {
      // 指定编辑的资源ID 0.新增 其他.指定的资源ID
      editId: 0,
      // 页面级加载等待
      loading: false,

      // ######################################################################################################################

      // 表单数据
      formValidate: {
        title: '',
        summary: '',
        publish_time: '',
        cover: '',
        // status: 5, // 发布形式 1.私密 2.公开 5.草稿
        website_category: [], // 网站专栏
        article_category: [], // 分类专栏
        template_type: 'mz_article', // 文章模版类型
      },
      ruleValidate: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        summary: [
          { required: true, message: '请输入摘要', trigger: 'blur' }
        ],
        publish_time: [
          { required: true, message: '请选择发布时间', trigger: 'blur' },
        ],
        cover: [
          { required: true, message: '请添加封面图', trigger: 'blur' }
        ],
      },

      // ######################################################################################################################

      // 日期数据
      dateVal: '',
      // 添加图片弹窗
      resourceAddImageModal: false,

      // ######################################################################################################################

      // 获取网站专栏和分类专栏
      websiteCategory: [],
      articleCategory: [],

      // 文章模版
      templateType: [
        {
          id: 1,
          key: 'mz_article',
          name: '默认',
        },
        {
          id: 2,
          key: 'mz_article_long',
          name: '宽屏',
        },
      ],

    }
  },
  mounted () {
    this.editId = this.$route.params.id ? this.$route.params.id : 0
    if (this.editId) {
      this.getFormData()
    }
    this.getCategoryInfo() // 获取分类信息
  },
  methods: {
    // ######################################################################################################################
    // # 文章管理 - 封面编辑 保存和编辑 操作方法
    // ######################################################################################################################

    // 读取指定的资源用于编辑
    getFormData () {
      this.loading = true
      edit(this.editId).then(async res => {
        if (res.status === 200) {
          this.formValidate = res.data
          this.dateVal = res.data.publish_time
        } else {
          this.$Notice.error({ title: res.msg })
        }
        this.loading = false
      }).catch(res => {
        this.loading = false
        this.$Notice.error({ title: res.msg })
      })
    },
    // 提交表单
    onSubmit () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.editId) {
            this.handleUpdate()
          } else {
            this.handleStore()
          }
        }
      })
    },
    // 保存新建的资源
    handleStore () {
      store(this.formValidate).then(async res => {
        if (res.status === 200) {
          this.$Notice.success({ title: '新建成功' })
          this.$router.push({ name: 'content_article_List' })
        } else {
          this.$Message.error(res.msg);
        }
        this.loading = false
      }).catch(res => {
        this.$Message.error(res.msg);
        this.loading = false
      })
    },
    // 保存更新的资源
    handleUpdate () {
      update(this.formValidate.id, this.formValidate).then(async res => {
        if (res.status === 200) {
          this.$Notice.success({ title: '保存成功' })
          this.$router.push({ name: 'content_article_List' })
        } else {
          this.$Message.error(res.msg);
        }
        this.loading = false
      }).catch(res => {
        this.$Message.error(res.msg);
        this.loading = false
      })
    },

    // ######################################################################################################################
    // # 表单操作其他方法
    // ######################################################################################################################

    // 选择日期
    onChangeDate (date) {
      this.dateVal = date
      this.formValidate.publish_time = date.replace(/年/g, "-").replace(/月/g, "-").replace(/日/g, " ").replace(/点/g, ":").replace(/分/g, "")
    },

    // ######################################################################################################################
    // # 添加封面图
    // ######################################################################################################################

    // 添加封面图 弹窗
    onAddCover () {
      this.resourceAddImageModal = true
    },
    // 移除封面图
    onRmCover () {
      this.formValidate.cover = ''
    },

    // 关闭封面图 弹窗
    onVisibleChange (res) {
      this.resourceAddImageModal = res
    },
    // 导出封面图弹窗图片
    onExportImages (res) {
      const { images } = res
      const data = images[0]
      this.resourceAddImageModal = false
      this.formValidate.cover = images[0].img_url
    },

    // 删除网站专栏
    onDelCategoryTag (name, type) {
      if (type === 'website_category') {
        let index = this.formValidate.website_category.indexOf(name)
        this.formValidate.website_category.splice(index, 1)
      }
      if (type === 'article_category') {
        let index = this.formValidate.article_category.indexOf(name)
        this.formValidate.article_category.splice(index, 1)
      }
    },

    // ######################################################################################################################
    // # 
    // ######################################################################################################################

    // 获取网站专栏和分类专栏
    getCategoryInfo () {
      getWebsiteCategory().then(async res => {
        if (res.status === 200) {
          this.websiteCategory = res.data
        } else {
          this.$Message.error(res.msg);
        }
      }).catch(res => {
        this.$Message.error(res.msg);
      })
      getSortCategory().then(async res => {
        if (res.status === 200) {
          this.articleCategory = res.data
        } else {
          this.$Message.error(res.msg);
        }
      }).catch(res => {
        this.$Message.error(res.msg);
      })
    },

  }
}
</script>

<style>
.ivu-form-item-content {
  line-height: 0px;
}
.ivu-form-item {
  margin-bottom: 0px;
}
</style>

<style lang="scss" scoped>
.ivu-form-item-error-tip {
  margin-top: 40px;
}
.ui-publish--wrap {
  width: 100%;
  background-color: #fff;
  margin: 0 auto;
}

.pls {
  width: 100%;
  display: flex;
  line-height: 1;
}
.pls-container {
  flex: 1;
  padding: 45px 60px;
}

.pls-form-item {
  margin-bottom: 10px;
}
.pls-form-item-label {
  display: flex;
  align-items: center;
  padding: 12px 0;
}
.pls-form-item-required {
  .pls-form-item-label {
    &::before {
      content: "*";
      margin-right: 4px;
      line-height: 1;
      font-family: SimSun;
      font-size: 14px;
      color: #ed4014;
    }
  }
}
.pls-form-item-label span {
  margin-right: 6px;
}
.pls-form-item-label {
  .ivu-icon {
    font-size: 18px;
  }
}

.pls-face-image-list {
  // display: flex;
  // flex-wrap: wrap;
  height: 115px;
  margin-bottom: 20px;
}
.pls-face-item {
  width: 220px;
  height: 150px;
  position: relative;
  margin-bottom: 15px;
  img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  &:hover {
    .pls-face-operation {
      display: flex;
    }
  }
}
.pls-face-operation {
  width: 100%;
  height: 24px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
  display: none;
  > div {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    & + div {
      border-left: #fff solid 1px;
    }
  }
}
</style>
